<template>
	<el-popover trigger="hover" title="" width="700">
		<div class="flex-between-center margin-bottom-4">
			<span>机台工艺</span>
			<div class="flex-end-center">
				<div class="item-gap"><el-button size="mini">总机台: {{ optionList.length || 0 }}台</el-button></div>
				<div class="item-gap"><el-button size="mini">已通知: {{ optionList.filter(x => x.settingSpecSheetState).length || 0 }}台</el-button></div>
				<div><el-button size="mini">待通知: {{ optionList.filter(x => !x.settingSpecSheetState).length || 0 }}台</el-button></div>
			</div>
		</div>
		<jk-table :data="optionList" size="mini" :height="240">
			<vxe-column title="机台名称" align="left" field="machineName" :width="90"></vxe-column>
			<vxe-column title="工艺状态" align="center" field="openingState" :width="80">
				<template slot-scope="scope">
					<span>{{ !scope.row.settingSpecSheetState ? '待通知' : scope.row.settingSpecSheetState === 1 ? '已通知' : '已完成' }}</span>
				</template>
			</vxe-column>
			<vxe-column title="品种工艺单" align="left" field="specSheetCode" :min-width="160">
				<template slot-scope="scope">
					<span>{{ scope.row.specSheet ? scope.row.specSheet.code : '暂无' }}</span>
				</template>
			</vxe-column>
			<vxe-column title="通知人" align="left" field="notifierName" :width="100"></vxe-column>
			<vxe-column title="通知时间" align="left" field="notifierDateTime" :width="160"></vxe-column>
			<vxe-column width="80" align="center" field="version" title="操作">
				<template slot-scope="scope">
					<div class="flex-center">
						<!--<jk-button :disabled="scope.row.settingSpecSheetState === 2" class="item-gap" size="mini" type="text" @click="onNoticeBtn(scope.row.id)">去通知</jk-button>-->
						<jk-button class="item-gap" size="mini" type="text" @click="onNoticeBtn(scope.row.id)">去通知</jk-button>
					</div>
				</template>
			</vxe-column>
		</jk-table>
		<div slot="reference">
			<el-button size="mini" icon="el-icon-bell">
				<span>通知工艺员：</span>
				<span style="font-weight: 700; font-size: 13px;">{{ optionList.filter(x => x.settingSpecSheetState >= 1).length }}</span>
				<span> 台</span>
			</el-button>
		</div>
	</el-popover>
</template>
<script>
    export default {
        props: {
            optionList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {};
        },
        methods: {
            onNoticeBtn(e) {
                this.$emit('on-notice', e);
            }
        }
    };
</script>
